<template>
  <button @click="handleClick">方法事件</button>
  <button @click="sayHello('你好')">内联事件</button>
  <h2></h2>
  <span @click="sayHello1('你好',$event)">在内联事件处理器中访问事件参数</span>
  <button @click="(event)=>sayHello1('你好',event)">在内联事件处理器中访问事件参数</button>
  <hr />
  <h2>事件捕获</h2>
  <div @click.capture="handleFather">我是div本尊
    <span @click="handleSon">我是div的儿子</span>
  </div>
</template>
<script setup lang="ts">

function handleClick(event:MouseEvent) {
  // console.log('点击了',(<HTMLElement>event.target).tagName)
  console.log('点击了', (event.target as HTMLElement).tagName)
}
const sayHello = (words: string) => {
  console.log(words)
}
const sayHello1 = (words: string, event:MouseEvent) => {
  console.log(words, (event.target as HTMLElement).tagName)
}

const handleFather = () => {
  console.log('执行父元素')
}
const handleSon = () => {
  console.log('执行子元素')
}
</script>
